<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item> <i class="el-icon-lx-calendar"></i> 假期管理 </el-breadcrumb-item>
                <el-breadcrumb-item>假期修改</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="form-box">
                <el-form ref="form" :model="form" label-width="80px" :rules="rules">
                    <el-form-item label="假期名称" prop="name">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="假期时间">
                        <el-date-picker
                            v-model="form.date"
                            format="yyyy-MM-dd"
                            value-format="yyyy-MM-dd"
                            @change="setValue"
                            type="daterange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期"
                        >
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-switch v-model="form.status" :active-value="'01'" :inactive-value="'00'"></el-switch>
                    </el-form-item>

                    <el-form-item label="假期描述">
                        <el-input type="textarea" rows="5" v-model="form.description"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="goback" icon="el-icon-arrow-left">返回</el-button>
                        <el-button type="primary" @click="onSubmit('form')" icon="el-icon-edit">修改</el-button>
                        <el-button type="warning" @click="reset()" icon="el-icon-refresh-right">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'baseform',
    inject: ['reload'],
    data() {
        return {
            id: this.$route.query.id,
            holiday: {},
            form: {
                id: '',
                name: '',
                date: [],
                startTime: '',
                endTime: '',
                status: '01',
                description: ''
            },
            rules: {
                name: [
                    { required: true, message: '请部门名称', trigger: 'blur' },
                    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                ]
            }
        };
    },
    created: function () {
        this.init();
    },
    methods: {
        setValue(val) {
            this.form.startTime = val[0];
            this.form.endTime = val[1];
        },

        async init() {
            var d = await this.$http.get('/holiday/' + this.id);
            if ((d.code = 200)) {
                this.holiday = d.data;
                this.initform(this.holiday);
            } else {
                this.$message.error(d.message);
            }
        },

        initform(holiday) {
            this.form.name = holiday.name;
            this.form.startTime = holiday.startTime;
            this.form.endTime = holiday.endTime;
            this.form.status = holiday.status;
            this.form.description = holiday.description;
            this.form.date.push(holiday.startTime);
            this.form.date.push(holiday.endTime);
            console.log(this.form.date);
        },

        onSubmit(formName) {
            this.form.id = this.id;
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    var d = await this.$http.put('/holiday', this.form);
                    if (d.code == 200) {
                        this.$message.success(d.message);
                    } else {
                        this.$message.error(d.message);
                    }
                } else {
                    this.$message.warning('请把内容填写完整!');
                }
            });
        },

        goback() {
            this.$router.go(-1);
        },

        reset() {
            this.$confirm('此操作将恢复至未修改前, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    this.form.date = [];
                    this.initform(this.holiday);
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消重置'
                    });
                });
        }
    }
};
</script>